<template>
  <Modal
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="预订成功"
  >
    <div class="modal-main">
      <div class="flx-row-c-c" style="margin-bottom: 20px;">
        <div class="success-icon"></div>
        <span class="f-w-600 f-18 c-d2">恭喜您，已预订成功</span>
      </div>
      <div class="f-16 c-d2 w-p-100" style="text-align:center;">抢注结果将在域名删除的隔天，敬请关注。</div>
      <div class="flx-row-c-c" style="margin-top: 30px;">
        <span class="c-g">您现在可以：</span>
        <span class="b-form-font-button" style="margin-left:15px;" @click="toMyOrder">查看预订的域名</span>
        <span class="b-form-font-button" style="margin-left:15px;" @click="toList">继续预订域名</span>
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    toMyOrder() {
      window.location.href = "/user/mybookings";
    },
    toList() {
      this.$router.push({
        name: 'dnbooking'
      })
    },
    cancel() {
      this.config = false;
    }
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;
}
.success-icon {
  @include size(102px, 77px);
  @include bg-setting('pay-success-icon');
  margin-right: 31px;
}
</style>
